ul,
p ,
body{
    list-style: none;
    margin: 0;
    padding: 0;
}
body{
    overflow: auto; 
    background-color: #E7E7E7;
}

.body{
    width: 100vw;
    height: 100vh;
    overflow: hidden; 
}
.outsideCircle,
.insideCircle,
.centerCircle
{
    position: absolute;
    left: 50vmin;
    top: 50vmin;
    border-radius: 100%;
    transform: translate(-50%, -50%);
}


.outsideCircle {
    width: 100vmin;
    height: 100vmin;
    border-radius: 50vmin;
    background-color: #faa52c;
}

.insideCircle {
    width: 90vmin;
    height: 90vmin;
    background-color: #e8e8e8;
    overflow: hidden;
}

.centerCircle {
    width: 80vmin;
    height: 80vmin;
    box-shadow: 0vmin 0vmin 10vmin rgba(167, 160, 160, 0.3);

}

.moneyRegion {
    position: relative;
    font-size: 2rem;
    font-weight: 700;
    color: #fa566f;
}

.moneyRegion p {
    position: absolute;
    left: 0;
    width: 50vmin;
    height: 50vmin;
    line-height: 50vmin;
    text-align: center;
    transform-origin: 0 25vmin;
}

.moneyRegion .one {
    position: absolute;
    left: 45vmin;
    top: 45vmin;
    width: 45vmin;
    height: 45vmin;
    color: #ffffff;
    background-color: #e44d69;
    transform: rotate(65deg);
    transform-origin: 0 0;
}

.moneyRegion .one p {
    transform: translate(0, -25vmin) rotate(54deg);
}

.moneyRegion .two {
    position: absolute;
    left: 45vmin;
    top: 45vmin;
    width: 45vmin;
    height: 45vmin;
    background-color: #ffffff;
    transform: rotate(-2deg);
    transform-origin: 0 0;
}

.moneyRegion .two p {
    transform: translate(0, -25vmin) rotate(54deg);
}

.moneyRegion .three {
    position: absolute;
    left: 45vmin;
    top: 45vmin;
    width: 45vmin;
    height: 45vmin;
    color: #ffffff;
    background-color: #fa566f;
    transform: rotate(-70deg);
    transform-origin: 0 0;
}

.moneyRegion .three p {
    transform: translate(0, -25vmin) rotate(60deg);
}

.moneyRegion .four {
    position: absolute;
    left: 45vmin;
    top: 45vmin;
    width: 45vmin;
    height: 45vmin;
    background-color: #ffffff;
    transform: rotate(-120deg);
    transform-origin: 0 0;
}

.moneyRegion .four p {
    transform: translate(0, -25vmin) rotate(60deg);
}

.moneyRegion .five {
    position: absolute;
    left: 45vmin;
    top: 45vmin;
    width: 45vmin;
    height: 45vmin;
    color: #ffffff;
    background-color: #fa566f;
    transform: rotate(190deg);
    transform-origin: 0 0;

}

.moneyRegion .five p {
    transform: translate(0, -25vmin) rotate(68deg);
}

.moneyRegion .six {
    position: absolute;
    left: 45vmin;
    top: 45vmin;
    width: 45vmin;
    height: 45vmin;
    background-color: #ffffff;
    transform: rotate(155deg);
    transform-origin: 0 0;


}

.moneyRegion .six p {
    transform: translate(0, -25vmin) rotate(40deg);
}
.rotation{
    position: relative;
}
.wheel,
.blackwheel{
    position: absolute;
    left: 40vmin;
    top: 40vmin;
    width: 24vmin;
    height: 24vmin;
    border-radius: 24vmin;
    background-color: #fff;
    box-shadow: 0 0 2vmin rgb(36, 30, 30);
    transform: translate(-12vmin, -12vmin);
}
.wheel::after{
    content: " ";
    position: absolute;
    left: 1vmin;
    top: 1vmin;
    width: 7vmin;
    height: 7vmin;
    background-color: #fff;
     box-shadow: -5px -5px 5px rgb(151, 148, 148);
}
.blackwheel{
    width: 14vmin;
    height: 14vmin;
    color: #e44d69;
    font-size: 3rem;
    font-weight: 700;
    line-height: 14vmin;
    text-align: center;
    border: solid 2vmin #474747;
    transform: translate(-9vmin, -9vmin);
}

.rotation{
    animation:rotate 0.5s linear infinite;
    transform-origin:40vmin 40vmin;
} 
 @keyframes rotate{
    0%{
        transform: rotate(22.5deg);
    }
    100%{
        transform: rotate(360deg);
    }
 }